<template>
    <div class="projectTask" v-loading.fullscreen.lock="fullscreenLoading">
        <div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="我的任务" name="first">
                    <h3>所有任务({{ taskdata.length }})</h3>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="task_tree">
            <el-tree :data="taskdata" node-key="id" :props="props" ref="tree" :accordion="true" :load="loadNode" lazy :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <chooseStatus :taskForm="data.data" style="margin-right: 10px;"></chooseStatus>
                    <div class="task-table-item-content">
                        <el-tooltip effect="dark" :content="data.data.name" placement="right">
                            <span class="task-table-item-title" @click="detailsClick(data)">{{ data.data.name }}</span>
                        </el-tooltip>
                    </div>
                    <div style="display:flex;margin-right:15px;width:120px;overflow: hidden;justify-content: flex-end;">
                        <div v-for="items in data.data.tags" :key="items.tagId" :style="{borderColor:items.color,color:items.color}" class="task_tags">{{ items.name }}</div>
                    </div>
                    <el-tooltip class="item" effect="dark" :content="data.data.taskType | taskTypeFilter" placement="right">
                        <span class="task-table-item-status">{{ data.data.taskType | taskTypeFilter }}</span>
                    </el-tooltip>
                    <div style="display:flex;">
                        <span :style="{color:data.data.startDate&&data.data.endDate?'':'white'}" class="task-table-item-date">{{ data.data.startDate }} - {{ data.data.endDate }}</span>
                        <span class="task-table-item-date" :style="{color:data.data.workStartDate&&data.data.workEndDate?'':'white'}">{{ data.data.workStartDate }} - {{ data.data.workEndDate }}</span>
                    </div>
                    <!-- <span class="task-table-item-date">{{data.data.startDate}} - {{data.data.endDate}}</span>
      <span class="task-table-item-date">{{data.data.createDate}}</span> -->
                    <div class="task-table-item-member">
                        <span class="task-table-item-overdue" v-if="data.data.status!='00'&&data.data.status!='07'&&data.data.status!='08'&&data.data.status!='10'">{{ beOverdue(data.data.endDate) ? '逾期' + beOverdue(data.data.endDate) + '天' : '' }}</span>
                        <el-tooltip v-if="data.data.masterSysUser" class="item" effect="dark" :content="data.data.masterSysUser.userName" placement="right">
                            <span class="task-table-item-member-title">{{ data.data.masterSysUser.userName }}</span>
                        </el-tooltip>
                        <div v-if="data.data.masterSysUser" class="task-table-item-member-logo">
                            <el-image style="width: 100%;height: 100%;border-radius: 100%" :src="data.data.masterSysUser.avatar?data.data.masterSysUser.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'">
                            </el-image>
                        </div>
                    </div>
                </span>
            </el-tree>
        </div>
        <div>
            <h3>今日任务({{ datataskdata.length }})</h3>
            <el-tree :data="datataskdata" node-key="id" :props="props" ref="tree" :accordion="true" :load="loadNode" lazy :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <chooseStatus :taskForm="data.data" style="margin-right: 10px;"></chooseStatus>
                    <!-- <copyTask adress='#I4B9U2' style="margin-left: 10px"></copyTask>
      <div class="task-table-item-content">
        <el-tooltip class="item" effect="dark" :content="data.label" placement="top">
          <span class="task-table-item-title" @click="detailsClick(data)">{{data.label}}</span>
        </el-tooltip>
      </div> -->
                    <div class="task-table-item-content">
                        <el-tooltip effect="dark" :content="data.data.name" placement="right">
                            <span class="task-table-item-title" @click="detailsClick(data)">{{ data.data.name }}</span>
                        </el-tooltip>
                    </div>
                    <div style="display:flex;margin-right:15px;width:120px;overflow: hidden;justify-content: flex-end;">
                        <div v-for="items in data.data.tags" :key="items.tagId" :style="{borderColor:items.color,color:items.color}" class="task_tags">{{ items.name }}</div>
                    </div>
                    <el-tooltip class="item" effect="dark" :content="data.data.taskType | taskTypeFilter" placement="right">
                        <span class="task-table-item-status">{{ data.data.taskType | taskTypeFilter }}</span>
                    </el-tooltip>
                    <!-- <span class="task-table-item-date">{{data.data.startDate}} - {{data.data.endDate}}</span>
      <span class="task-table-item-date">{{data.data.createDate}}</span> -->
                    <div style="display:flex;">
                        <span class="task-table-item-date" :style="{color:data.data.startDate&&data.data.endDate?'':'white'}">{{ data.data.startDate }} - {{ data.data.endDate }}</span>
                        <span class="task-table-item-date" :style="{color:data.data.workStartDate&&data.data.workEndDate?'':'white'}">{{ data.data.workStartDate }} - {{ data.data.workEndDate }}</span>
                    </div>
                    <div class="task-table-item-member">
                        <span class="task-table-item-overdue" v-if="data.data.status!='00'&&data.data.status!='07'&&data.data.status!='08'&&data.data.status!='10'">{{ beOverdue(data.data.endDate) ? '逾期' + beOverdue(data.data.endDate) + '天' : '' }}</span>
                        <el-tooltip v-if="data.data.masterSysUser" class="item" effect="dark" :content="data.data.masterSysUser.userName" placement="right">
                            <span class="task-table-item-member-title">{{ data.data.masterSysUser.userName }}</span>
                        </el-tooltip>
                        <div v-if="data.data.masterSysUser" class="task-table-item-member-logo">
                            <el-image style="width: 100%;height: 100%;border-radius: 100%" :src="data.data.masterSysUser.avatar?data.data.masterSysUser.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'">
                            </el-image>
                        </div>
                    </div>
                </span>
            </el-tree>
        </div>
        <div>
              <h3>本周任务({{ weektaskdata.length }})</h3>
            <el-tree :data="weektaskdata" node-key="id" :props="props" ref="tree" :accordion="true" :load="loadNode" lazy :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <chooseStatus :taskForm="data.data" style="margin-right: 10px;"></chooseStatus>
                    <!-- <copyTask adress='#I4B9U2' style="margin-left: 10px"></copyTask>
      <div class="task-table-item-content">
        <el-tooltip class="item" effect="dark" :content="data.label" placement="top">
          <span class="task-table-item-title" @click="detailsClick(data)">{{data.label}}</span>
        </el-tooltip>
      </div> -->
                    <div class="task-table-item-content">
                        <el-tooltip effect="dark" :content="data.data.name" placement="right">
                            <span class="task-table-item-title" @click="detailsClick(data)">{{ data.data.name }}</span>
                        </el-tooltip>
                    </div>
                    <div style="display:flex;margin-right:15px;width:120px;overflow: hidden;justify-content: flex-end;">
                        <div v-for="items in data.data.tags" :key="items.tagId" :style="{borderColor:items.color,color:items.color}" class="task_tags">{{ items.name }}</div>
                    </div>
                    <el-tooltip class="item" effect="dark" :content="data.data.taskType | taskTypeFilter" placement="right">
                        <span class="task-table-item-status">{{ data.data.taskType | taskTypeFilter }}</span>
                    </el-tooltip>
                    <div style="display:flex;">
                        <span class="task-table-item-date" :style="{color:data.data.startDate&&data.data.endDate?'':'white'}">{{ data.data.startDate }} - {{ data.data.endDate }}</span>
                        <span class="task-table-item-date" :style="{color:data.data.workStartDate&&data.data.workEndDate?'':'white'}">{{ data.data.workStartDate }} - {{ data.data.workEndDate }}</span>
                    </div>
                    <!-- <span class="task-table-item-overdue" v-if="beOverdue(data.data.endDate) > 0"></span> -->
                    <!-- <span class="task-table-item-date">{{data.data.startDate}} - {{data.data.endDate}}</span>
      <span class="task-table-item-date">{{data.data.createDate}}</span> -->
                    <div class="task-table-item-member">
                        <span class="task-table-item-overdue" v-if="data.data.status!='00'&&data.data.status!='07'&&data.data.status!='08'&&data.data.status!='10'">{{ beOverdue(data.data.endDate) ? '逾期' + beOverdue(data.data.endDate) + '天' : '' }}</span>
                        <el-tooltip v-if="data.data.masterSysUser" class="item" effect="dark" :content="data.data.masterSysUser.userName" placement="right">
                            <span class="task-table-item-member-title">{{ data.data.masterSysUser.userName }}</span>
                        </el-tooltip>
                        <div v-if="data.data.masterSysUser" class="task-table-item-member-logo">
                            <el-image style="width: 100%;height: 100%;border-radius: 100%" :src="data.data.masterSysUser.avatar?data.data.masterSysUser.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'">
                            </el-image>
                        </div>
                    </div>
                </span>
            </el-tree>
        </div>
    </div>
</template>

<script>
import chooseStatus from "@/components/chooseStatus";
import copyTask from "@/components/copyTask/index";
import { getTreeData } from "@/api/task";

export default {
    data() {
        return {
            fullscreenLoading: false,
            props: {
                label: "indexName",
                children: [],
                isLeaf: "isLeaf",
            },
            projId: "",
            current: 1,
            size: 20,
            total: 0,
            activeName: "first",
            taskdata: [],
            datataskdata: [],
            weektaskdata: [],
        };
    },
    filters: {
        taskTypeFilter(data) {
            if (data == "00") {
                return "需求";
            } else if (data == "01") {
                return "设计";
            } else if (data == "02") {
                return "开发";
            } else if (data == "04") {
                return "测试";
            } else if (data == "05") {
                return "缺陷";
            } else if (data == "06") {
                return "其他";
            }
        },
    },
    components: {
        chooseStatus,
        copyTask,
    },
    watch: {
        $route(newVal, oldVal) {
            console.log(newVal);
            if (newVal.query.id != this.projId) {
                this.taskgetTreeDataclck();
            }
        },
    },
    created() {
        this.projId = this.$route.query.id;
    },
    mounted() {
        this.taskgetTreeDataclck();
    },
    methods: {
        beOverdue(val) {
            var timestamp1 = new Date(val).getTime(); //结束时间
            var timestamp2 = new Date().getTime(); //现在时间
            var d = parseInt((timestamp1 - timestamp2) / 1000 / (24 * 3600)); //d>0 没到时间  d<0时间已经过了
            if (d < 0) {
                return Math.abs(d);
            } else {
                return null;
            }
        },
        loadNode(node, resolve) {
            // 一级节点处理
            if (node.level === 0) {
                // this.requestTree(resolve)
            }
            // 其余节点处理
            if (node.level >= 1) {
                // 注意！把resolve传到你自己的异步中去
                this.getIndex(node, resolve);
            }
        },
        // 异步加载叶子节点数据函数
        getIndex(node, resolve) {
            var _this = this;
            getTreeData({
                level: node.data.data.taskLevel + 1,
                parentId: node.data.id,
            }).then((res) => {
                const { data } = res;
                resolve(data.data);
            });
        },
        // 获取项目中的任务
        async taskgetTreeDataclck() {
            this.fullscreenLoading = true;
            let res = await getTreeData(
                { current: this.current, size: this.size, projId: this.projId },
                false
            );
            this.taskdata = res.data.data;
            let item = await getTreeData(
                {
                    current: this.current,
                    size: this.size,
                    projId: this.projId,
                    recentTask: 0,
                },
                false
            );
            this.datataskdata = item.data.data;
            let data = await getTreeData(
                {
                    current: this.current,
                    size: this.size,
                    projId: this.projId,
                    recentTask: 1,
                },
                false
            );
            this.weektaskdata = data.data.data;
            this.fullscreenLoading = false;
        },
        detailsClick(data) {
            this.$router.push({
                path: "/task/details",
                query: { id: data.id },
            });
        },
    },
};
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
}

.task-table-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* flex-grow: 1; */
}

.task-table-item-title {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #2e405e;
    font-size: 12px;
    margin-right: 10px;
    /* width: 160px; */
    width: 100px;
    /* min-width: 52px; */
}

.task-table-item-title:hover {
    color: #1890ff;
}

.task-table-item-tag {
    margin-right: 10px;
}

.task-table-item-status {
    max-width: 52px;
    min-width: 22px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #909aaa;
    margin-right: 10px;
    font-size: 12px;
}

.task-table-item-datebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    max-width: 160px;
    width: 100%;
    justify-content: flex-end;
}

.task-table-item-date {
    color: #909aaa;
    margin-right: 10px;
    font-size: 12px;
    width: 140px;
    display: block;
    /* text-align: right; */
    /* margin-left: 5px; */
}

.task-table-item-overdue {
    font-size: 12px;
    color: #ff4949;
    width: 70px;
    margin-right: 10px;
    text-align: right;
}

.task-table-item-member {
    display: flex;
    justify-content: flex-end;
    /* flex-direction: row;
  align-items: center; */
    /* width: 111px; */
    width: 150px;
    height: 20px;
    text-align: right;
}

.task-table-item-member-title {
    /* width: 86px; */
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}

.task-table-item-member-title:hover {
    color: #1890ff;
}

.task-table-item-member-logo {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #e47777;
}

[v-cloak] {
    display: none !important;
}

.task_tags {
    height: 100%;
    padding: 3px;
    font-size: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    margin-right: 5px;
}
</style>
